import { Link, history, getLocale, setLocale, useIntl, useDispatch } from 'umi';
import styles from './header.less';
import { Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import imgLangcn from '@/images/lang-cn.svg';
import imgLanggk from '@/images/lang-hk.svg';
import imgLangen from '@/images/lang-en.svg';

const localeIcons = {
  'zh-CN': imgLangcn,
  'zh-HK': imgLanggk,
  'en-US': imgLangen,
};
const checkLang = (lang: string) => {
  setLocale(lang, false);
};

function selectLocale() {
  const locale = getLocale();

  const langMenu = (
    <Menu>
      <Menu.Item>
        <div className={styles.dropdownItem} onClick={() => checkLang('en-US')}>
          <img src={imgLangen} alt="" className={styles.langIcon} /> English
        </div>
      </Menu.Item>
      <Menu.Item>
        <div className={styles.dropdownItem} onClick={() => checkLang('zh-HK')}>
          <img src={imgLanggk} alt="" className={styles.langIcon} /> 繁體中文
        </div>
      </Menu.Item>
      <Menu.Item>
        <div className={styles.dropdownItem} onClick={() => checkLang('zh-CN')}>
          <img src={imgLangcn} alt="" className={styles.langIcon} /> 简体中文
        </div>
      </Menu.Item>
    </Menu>
  );

  return (
    <Dropdown overlay={langMenu}>
      <div className={styles.dropdownItem} onClick={(e) => e.preventDefault()}>
        <img
          src={localeIcons[locale || 'cn-ZH']}
          alt=""
          className={styles.langIcon}
        />{' '}
        <DownOutlined />
      </div>
    </Dropdown>
  );
}

export default selectLocale;
